{% extends 'base.html' %}
{% block header %}
    <div class="search_bar clearfix">
    <a href="/" class="logo fl"><img src="/static/images/logo.png"></a>
    <form method='get' action="/search/" target="_blank">
    <div class="search_con fl">
        <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
        <input type="submit" class="input_btn fr" name="" value="搜索">
    </div>
    </form>
</div>
{% endblock %}
{% block title %}
    购物车
{% endblock %}
{% block main %}
	<div class="total_count">全部商品<em class="total_count1">{{ total_count }}</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
<form action="{% url 'order:payorder' %}" method="post">
    {%for cart in carts%}
	<ul class="cart_list_td clearfix" id="{{cart.id}}">
        {% csrf_token %}
		<li class="col01"><input type="checkbox" name="sku_id" value="{{cart.id}}" checked="" class="checkbox"></li>
		<li class="col02"><img src="{{cart.image}}"></li>
		<li class="col03">{{cart.name}}<br><em>{{cart.price}}元/{{cart.unite}}</em></li>
		<li class="col04">{{cart.unite}}</li>
		<li class="col05">{{cart.price}}</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl" data-id="{{ cart.id }}">+</a>
				<input type="text" class="num_show fl" data-id="{{ cart.id }}" value="{{cart.count}}">
				<a href="javascript:;" class="minus fl" data-id="{{ cart.id }}">-</a>
			</div>
		</li>
		<li class="col07">{{cart.product_total_price}}</li>
		<li class="col08"><a id="delete" data-id="{{ cart.id }}" href="">删除</a></li>
		<!--class="del_good-->
	</ul>
	{%endfor%}

	<ul class="settlements">
{#		<li class="col01"><input type="checkbox" name="" checked="" id="checkToggle"></li>#}
		<li class="col01"><input type="checkbox" name="" checked="" id="checkToggle"></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em id="sumtotal"></em><br>共计<b class="countGood">{{ total_count }}</b>件商品</li>
		<li class="col04"><input class="order" name="" type="submit" value="去结算"/></li>
	</ul>
</form>
{%endblock%}
{% block js%}
    <script>
        //计算总件数以及总价格
        function get_total_price(){
            total_price = 0
            total_count = 0
            $('.cart_list_td').find(':checked').parents('ul').each(function () {
                p_num = $(this).find('.num_show').val()
                p_price = $(this).find('.col07').text()
                total_count += parseInt(p_num)
                total_price += parseFloat(p_price)
            })
            $('.settlements').find('#sumtotal').text(total_price)
            $('.settlements').find('.countGood').text(total_count)
        }
        //当某个商品选中或者未选中时，更新当前页面的的状态
        $('.cart_list_td').find(':checkbox').change(function () {
            all_len = $('.cart_list_td').find(':checkbox').length
            check_len = $('.cart_list_td').find(':checked').length
            {#is_checkd = true#}
            if(all_len>check_len){
                $('.settlements').find(':checkbox').prop('checked', false)
            }
            else {
                $('.settlements').find(':checkbox').prop('checked', true)
            }
            get_total_price()
        });
        //设置全选/全不选checkbox
        $('.settlements').find(':checkbox').change(function () {
            is_checked = $(this).prop('checked')
            $('.cart_list_td').find(':checkbox').each(function () {
                $(this).prop('checked', is_checked)
            })
            get_total_price()
        });
        //购物车增加
        $('.add').click(function () {
            sku_id = $(this).attr('data-id')
            count = $(this).next().val()
            count = parseInt(count) + 1
            csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
            params = {sku_id, count, csrfmiddlewaretoken}
            // 设置ajax请求为同步方式
            $.ajaxSettings.async = false
            $.post('/cart/updatecart', params, function (data) {
            if(data.status == 5){
                $('.total_count1').text(data.total_count)
                error_response = false
                {#alert('successful')#}
            }
            else{
                alert(data.msg)
                return
            }

        })
            $.ajaxSettings.async = true
            if(error_response==false){
                $(this).next().val(count)
                price = $(this).parents('ul').find('.col05').text()
                total_p = parseFloat(price) * parseInt(count)
                $(this).parents('ul').find('.col07').text(total_p)
                if($(this).parents('ul').find(':checked')){
                    get_total_price()
                }
            }
        })
        //购物车商品减少
        $('.minus').click(function () {
            sku_id = $(this).attr('data-id')
            count = $(this).prev().val()
            count = parseInt(count) - 1
            if(count<=0){
                return
            }
            csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
            params = {sku_id, count, csrfmiddlewaretoken}
            $.ajaxSettings.async = false
            $.post('/cart/updatecart', params, function (data) {
            if(data.status == 5){
                $('.total_count1').text(data.total_count)
                error_response = false
                {#alert('successful')#}
            }
            else{
                alert(data.msg)
            }

        })
            $.ajaxSettings.async = true
            if(error_response==false){
                $(this).prev().val(count)
                price = $(this).parents('ul').find('.col05').text()
                total_p = parseFloat(price) * parseInt(count)
                $(this).parents('ul').find('.col07').text(total_p)
                if($(this).parents('ul').find(':checked')){
                    get_total_price()
                }
            }
        })
        //手动输入
        g_count = 0
        $('.num_show').focus(function () {
            g_count = $(this).val()
        })
        $('.num_show').blur(function () {
            sku_id = $(this).attr('data-id')
            count = $(this).val()
            if(parseInt(count<=0) || isNaN(count)){
                 //输入值无效
                $(this).val(g_count)
                return
            }
            csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
            params = {sku_id, count, csrfmiddlewaretoken}
            $.ajaxSettings.async = false
            $.post('/cart/updatecart', params, function (data) {
            if(data.status == 5){
                $('.total_count1').text(data.total_count)
                error_response = false
                {#alert('successful')#}
            }
            else{
                alert(data.msg)
            }

        })
            $.ajaxSettings.async = true
            if(error_response==false){
                $(this).val(count)
                price = $(this).parents('ul').find('.col05').text()
                total_p = parseFloat(price) * parseInt(count)
                $(this).parents('ul').find('.col07').text(total_p)
                if($(this).parents('ul').find(':checked')){
                    get_total_price()
                }
            }
        })
        //删除商品
        $('#delete').click(function () {
            sku_id = $(this).attr('data-id')
            csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val()
            params = {sku_id, csrfmiddlewaretoken}
            ul = $(this).parents('.cart_list_td')
            $.post('/cart/delete', params, function (data) {
                if(data.status==3){
                    $('.total_count1').text(data.count)
                 ul.remove()
                 if($(this).parents('ul').find(':checked')){
                     get_total_price()
                 }
                 {#alert('shanchuchenggong')#}
                }
                else{
                    alert(data.msg)
                }
            })
        })
        $(function () {
            get_total_price()
        })
    </script>
{% endblock %}
